<template>
  <div class="addProduct">
    <div class="card">
      <div class="step">
        <el-steps :active="step" align-center finish-status="success">
          <el-step description="填写商品信息" />
          <el-step description="填写商品促销" />
          <el-step description="填写商品属性" />
          <el-step description="选择商品关联" />
        </el-steps>
      </div>
      <div class="content">
        <Table1 v-show="step == 0" :form="form" @changeStep="changeStep" />
        <Table2 v-show="step == 1" :form="form" @changeStep="changeStep" />
        <Table3 v-show="step == 2" :form="form" @changeStep="changeStep" />
        <Table4
          v-show="step == 3"
          :form="form"
          @changeStep="changeStep"
          :data="data"
          :data1="data1"
        />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import Table1 from "./components/table1.vue";
import Table2 from "./components/table2.vue";
import Table3 from "./components/table3.vue";
import Table4 from "./components/table4.vue";
import { ApiAddProduct, ApiSpecial, ApiPrefrenceArea } from "./types/index";

// 添加商品的参数
const form = ref<IAddProductParams>({
  name: "",
  productSn: "",
});

interface Option {
  key: number;
  label: string;
  initial: string;
}

// 传给table4的数据
const data1 = ref<Option[]>([]);
ApiPrefrenceArea().then((res) => {
  if (res.code == 200) {
    let list = res.data.map((item) => item.name);
    const initials = ["CA", "IL", "MD", "TX", "FL", "CO", "CT"];
    list.forEach((city, index) => {
      data1.value.push({
        label: city,
        key: index,
        initial: initials[index],
      });
    });
  }
});

// 传给table4的数据
const data = ref<Option[]>([]);
ApiSpecial().then((res) => {
  if (res.code == 200) {
    let list = res.data.map((item) => item.title);
    const initials = ["CA", "IL", "MD", "TX", "FL", "CO", "CT"];
    list.forEach((city, index) => {
      data.value.push({
        label: city,
        key: index,
        initial: initials[index],
      });
    });
  }
});
// 请求
// ApiAddProduct(form.value).then((res) => {
//   // console.log(res);
//   // form.value = res.data;
// });

const step = ref<number>(0);

const changeStep = (val: number) => {
  step.value += val;
};

const changeForm = () => {};

const onSubmit = () => {
  console.log("submit!");
};
</script>

<style lang="less" scoped>
.addProduct {
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  .card {
    border: 1px solid #eee;
    box-sizing: border-box;
    width: 800px;
    margin: auto;
    padding: 20px;
    padding-bottom: 40px;
    .step {
      margin: 30px 0;
      :deep(.el-step__main) {
        margin-top: 10px;
      }
    }

    .btn {
      text-align: center;
    }
  }
}
</style>
